<template>
  <div class='container'>
    <div class="center">
      <!-- 顶部 -->
      <div class="top">
      <span>关键字</span>
      <el-input v-model="query.keyword" placeholder="根据文章标题搜索" class="inp"></el-input>
      <span>状态</span>

  <el-select v-model="query.state" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
 <el-button class="clean" @click="cleanTit">清除</el-button>
 <el-button type="primary" @click="search">搜索</el-button>
 <el-button type="success" icon="el-icon-edit" class="renew" @click="addBtn">新增技巧</el-button>
    </div>
    <!-- 数据数量 -->
    <div class="num">数据一共{{this.counts}}条</div>
    <!-- 表格 -->
    <div class="tab">
    <!-- :data="tableData"绑定数据
    prop="date"中data根据数据回填 -->
  <template>
    <el-table
    :data="tableData"
    border
    style="width: 100%;"
    >
     <el-table-column
      type="index"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      label="文章标题"
      width= "400">
      <template v-slot="obj">
        {{obj.row.title}} <i @click="videoLook(obj.row)" :class=" [obj.row.videoURL? 'el-icon-film' : '']"></i>
      </template>
    </el-table-column>
    <el-table-column
      prop="visits"
      label="阅读数"
      >
    </el-table-column>
    <el-table-column
      prop="username"
      label="录入人"
      >
    </el-table-column>
    <el-table-column
      label="录入时间"
      >
      <template v-slot="obj">
        {{obj.row.createTime | date_format}}
      </template>
    </el-table-column>
    <el-table-column
      label="状态"
      >
      <template v-slot="obj">
        {{obj.row.state | state_format}}
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="320">
      <!-- <template slot-scope="scope"> -->
        <template v-slot="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">预览</el-button>
        <!-- disabled -->
        <el-button  type="text" size="small" @click="startClick(scope.row)">{{scope.row.state | start_format}}</el-button>
        <el-button :disabled="scope.row.state === 0" ref="asd" type="text" size="small" @click="updateAPI(scope.row)">修改</el-button>
        <el-button :disabled="scope.row.state === 0" type="text" size="small" @click="removeAPI(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </template>
    </div>
    <!-- 底部分页 -->
    <div class="paging">
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="query.pagesize"
      layout="total, prev, pager, next, sizes,jumper"
      :total="counts">
    </el-pagination>
    </div>
    </div>
    <!-- 新增显示框 -->
    <el-dialog title="新增文章" :visible="dialogFormVisible" :before-close="handleClose">
  <el-form :model="form" :rules="rules" ref="addForm" label-width="100px">
    <el-form-item label="文章标题"  prop="title">
      <el-input v-model="form.title" placeholder="请输入文章标签" style="width:95%;"></el-input>
    </el-form-item>
    <!-- 富文本 -->
    <el-form-item label="文章内容" prop="articleBody" class="vue-quill-editor">
      <quill-editor  v-model="form.articleBody" style="width:95%;"></quill-editor>
    </el-form-item>
    <el-form-item label="视频地址">
      <el-input v-model="form.videoURL" placeholder="请输入视频地址" style="width:95%;"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="closeBtn">取 消</el-button>
    <el-button type="primary" @click="publish">确 定</el-button>
  </div>
</el-dialog>
  <!-- 预览框 -->
  <el-dialog title="预览文章" :visible="dialogFormCtp" @close="closeCtp">
    <div class="preview">
      <h2  class="spring">
        {{previsualization.title}}
      </h2>
      <div class="nameTime">
        <span>{{dayjs(previsualization.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
        <span>{{previsualization.username}}</span>
        <!-- 小眼睛 -->
        <i class="el-icon-view"></i>
        <span>{{previsualization.visits}}</span>
      </div>
      <p v-html="previsualization.articleBody"></p>
    </div>
</el-dialog>
     <!-- 播放视频的窗口 -->
    <div v-if="showVideo">
      <div class="xBox" @click="showVideo = false"><i class="el-icon-close"></i></div>
      <div class="videoBox">
      <video :src="videoURL" controls autoplay></video>
    </div>
    </div>
  </div>
</template>

<script>
// changeState
import { list, remove, add, update, detail, changeState } from '@/api/hmmm/articles.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      // 获取文章列表请求参数
      query: {
        page: 1, // 当前页数  keyword: '', // 关键字
        pagesize: 10,
        keyword: '',
        state: null // 页尺寸 // state: '' // 状态 1 开启 0 屏蔽
      },
      // 关键字绑定
      // essTitle: '',
      // 启用禁用
      options: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ], // 同上
      // value: '',
      // 最大表格数据渲染
      tableData: [],
      // 新增绑定
      form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      // 预览数据
      previsualization: {},
      dialogFormVisible: false,
      dialogFormCtp: false,
      // 分页
      counts: 0,
      // 视频
      videoURL: '',
      showVideo: false
    }
  },
  created () {
    this.listAPI()
  },
  methods: {
    // upTime (t) {
    //   console.log(t)
    // },
    // 获取列表数据
    async listAPI () {
      const res = await list(this.query)
      console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    // 新增修改提交
    publish () {
      if (this.form.id) {
        this.$confirm('确定修改吗', '温馨提示').then(async () => {
          await update(this.form)
          // 更新列表
          this.listAPI()
          // 提示
          this.$message.success('修改成功')
          // 关闭并清空弹框
          this.dialogFormVisible = false
          this.form = {
            title: '',
            articleBody: '',
            videoURL: ''
          }
        }).catch(() => {
          this.$message.success('修改失败')
        })
      } else {
        this.$confirm('确定提交吗', '温馨提示').then(async () => {
          await add(this.form)
          // 更新列表
          this.listAPI()
          // 提示
          this.$message.success('提交成功')
          // 关闭并清空弹框
          this.dialogFormVisible = false
          this.form = {
            title: '',
            articleBody: '',
            videoURL: ''
          }
        }).catch(() => {
          this.$message.success('提交失败')
        })
      }
    },
    // 打开新增弹窗
    addBtn () {
      this.dialogFormVisible = true
    },
    // 关闭新增弹窗
    closeBtn () {
      // 关闭并清空弹框
      this.dialogFormVisible = false
      this.form = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      // 重置表单
      this.$refs.addForm.resetFields()
    },
    // 关闭新增弹窗之前
    handleClose () {
      // 关闭并清空弹框
      this.dialogFormVisible = false
      this.form = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      // 重置表单
      this.$refs.addForm.resetFields()
    },
    // 清除搜索输入框
    cleanTit () {
      this.query.keyword = ''
      this.query.state = null
    },
    // 打开预览框
    handleClick (row) {
      this.dialogFormCtp = true
      this.previsualization = row
    }, // 关闭预览框
    closeCtp () {
      this.dialogFormCtp = false
    },
    // 禁用与启用
    async startClick (row) {
      this.form = row
      if (this.form.state === 1) {
        this.form.state = 0
        await changeState(this.form)
        this.form = {
          title: '',
          articleBody: '',
          videoURL: ''
        }
      } else {
        this.form.state = 1
        await changeState(this.form)
        this.form = {
          title: '',
          articleBody: '',
          videoURL: ''
        }
      }
    },
    // 修改
    async updateAPI (row) {
      // 打开新增弹窗
      const res = await detail(row)
      this.form = res.data
      this.form.videoURL = res.request.custom.options.url
      this.addBtn()
    },
    // 删除
    removeAPI (val) {
      this.$confirm('确定删除该权限吗', '温馨提示').then(async () => {
        await remove(val.id)
        // 更新列表
        this.listAPI()
        // 提示
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.success('删除失败')
      })
    },
    // 改变每页条数数据触发
    handleSizeChange (newSize) {
      console.log(newSize)
      this.query.pagesize = newSize
      this.query.page = 1
      // 重新获取数据
      this.listAPI()
    },
    // 页码改变触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      // 重新获取数据
      this.listAPI()
    },
    // 搜索
    async search () {
      const res = await list(this.query)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    // 播放视频
    videoLook (row) {
      console.log(row)
      this.videoURL = row.videoURL
      this.showVideo = true
    },
    // 关闭音频
    closeVideo () {
    }
  },
  // 过滤器
  filters: {
    // 处理时间
    date_format (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 处理状态
    state_format (val) {
      // 枚举 1 启用 2禁用
      const MAP = {
        1: '已启用',
        0: '已禁用'
      }
      return MAP[val]
    },
    // 处理按钮
    start_format (val) {
      // 枚举 1 启用 2禁用
      const MAP = {
        1: '启用',
        0: '禁用'
      }
      return MAP[val]
    }
  }
}
</script>

<style  lang='scss' scoped>

.container {
  padding:10px;
  .center {
    background-color: #fff;
     padding-top: 20px;
  }

}
.top {
  padding-right: 40px;
  .inp {
    width: 165px;
  }
  span {
    padding-left: 50px;
    padding-right: 20px;
  }
  .clean {
    margin-left: 10px;
  }
  .renew {
    float: right;
  }
}
.num {
  width: 95%;
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  padding-left: 20px;
  margin-top: 15px;
  font-size: 14px;
  background-color: #ebeef5;
  color: grey;
}
.tab {
  width: 95%;
  margin: 0 auto;
  margin-top: 15px;
}
.preview {
  margin: 0 auto;
  background-color: #f5f5f5;
  .spring {
    width: 100%;
    height: 35px;
    margin: 0;
    padding: 0;
    background-color: #fff;
  }
  .nameTime {
    background-color: #fff;
    padding-bottom: 5px;
    padding-left: 10px;
    span {
      padding: 0 7px;
    }
  }
}
.paging {
  position: relative;
  width: 100%;
  height: 80px;
  background-color: #fff;
    .el-pagination {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0,-50%);
  }
}
.el-icon-film {
  color: blue;
}
.el-icon-film:hover {
  cursor:pointer;
}
 .el-icon-film{
    color: blue;
    cursor: pointer;
  }
  .xBox{
    position: fixed;
    top: 5%;
    left: 50%;
    transform:translateX(-50%) ;
    z-index: 999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    justify-content: center;
    align-items: center;
    i{
      color: #fff;
    }
  }
  .videoBox{
    width: 800px;
    height: 600px;
    position: fixed;
    top:20%;
    left: 50%;
    transform:translateX(-50%) ;
    video{
      width: 100%;
    }
  }
   .vue-quill-editor {
   .quill-editor{
    line-height: normal;
    .ql-container.ql-snow{
        line-height: normal !important;
        height: 550px !important;
        font-size:14px;
    }
    .ql-snow {
        .ql-tooltip[data-mode=link]::before {
            content: "请输入链接地址:";
        }
        .ql-tooltip.ql-editing a.ql-action::after {
            border-right: 0px;
            content: '保存';
            padding-right: 0px;
        }
        .ql-tooltip[data-mode=video]::before {
            content: "请输入视频地址:";
        }
        .ql-picker.ql-size {
            .ql-picker-label[data-value="12px"]::before,
            .ql-picker-item[data-value="12px"]::before {
                content: '12px';
            }
            .ql-picker-label[data-value="14px"]::before,
            .ql-picker-item[data-value="14px"]::before {
                content: '14px';
            }
            .ql-picker-label[data-value="16px"]::before,
            .ql-picker-item[data-value="16px"]::before {
                content: '16px';
            }
            .ql-picker-label[data-value="18px"]::before,
            .ql-picker-item[data-value="18px"]::before {
                content: '18px';
            }
            .ql-picker-label[data-value="20px"]::before,
            .ql-picker-item[data-value="20px"]::before {
                content: '20px';
            }
            .ql-picker-label[data-value="24px"]::before,
            .ql-picker-item[data-value="24px"]::before {
                content: '24px';
            }
            .ql-picker-label[data-value="28px"]::before,
            .ql-picker-item[data-value="28px"]::before {
                content: '28px';
            }
            .ql-picker-label[data-value="32px"]::before,
            .ql-picker-item[data-value="32px"]::before {
                content: '32px';
            }
            .ql-picker-label[data-value="36px"]::before,
            .ql-picker-item[data-value="36px"]::before {
                content: '36px';
            }
        }
        .ql-picker.ql-header {
            .ql-picker-label::before,
            .ql-picker-item::before {
                content: '文本';
            }
            .ql-picker-label[data-value="1"]::before,
            .ql-picker-item[data-value="1"]::before {
                content: '标题1';
            }
            .ql-picker-label[data-value="2"]::before,
            .ql-picker-item[data-value="2"]::before {
                content: '标题2';
            }
            .ql-picker-label[data-value="3"]::before,
            .ql-picker-item[data-value="3"]::before {
                content: '标题3';
            }
            .ql-picker-label[data-value="4"]::before,
            .ql-picker-item[data-value="4"]::before {
                content: '标题4';
            }
            .ql-picker-label[data-value="5"]::before,
            .ql-picker-item[data-value="5"]::before {
                content: '标题5';
            }
            .ql-picker-label[data-value="6"]::before,
            .ql-picker-item[data-value="6"]::before {
                content: '标题6';
            }
        }
        .ql-picker.ql-font{
            .ql-picker-label[data-value="SimSun"]::before,
            .ql-picker-item[data-value="SimSun"]::before {
                content: "宋体";
                font-family: "SimSun" !important;
            }
            .ql-picker-label[data-value="SimHei"]::before,
            .ql-picker-item[data-value="SimHei"]::before {
                content: "黑体";
                font-family: "SimHei";
            }
            .ql-picker-label[data-value="Microsoft-YaHei"]::before,
            .ql-picker-item[data-value="Microsoft-YaHei"]::before {
                content: "微软雅黑";
                font-family: "Microsoft YaHei";
            }
            .ql-picker-label[data-value="KaiTi"]::before,
            .ql-picker-item[data-value="KaiTi"]::before {
                content: "楷体";
                font-family: "KaiTi" !important;
            }
            .ql-picker-label[data-value="FangSong"]::before,
            .ql-picker-item[data-value="FangSong"]::before {
                content: "仿宋";
                font-family: "FangSong";
            }
        }
    }
    .ql-align-center{
      text-align: center;
    }
    .ql-align-right{
      text-align: right;
    }
    .ql-align-left{
      text-align: left;
    }
  }
  }
</style>
